<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8"/>
    <title>米塔云平台管理系统</title>
    <link href="plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
    <link href="customize/css/iconfont.css" rel="stylesheet">
    <style>
        body {
            background-color: #F5F5F5;
            font-size: 18px;
            color: #333333;
        }

        .font-p16 {
            font-size: 16px;
        }

        .font-p14 {
            font-size: 14px;
        }

        a:hover {
            text-decoration: none;
        }

        .flex-1 {
            -ms-flex: 1;
            flex: 1;
        }

        .custom-section {
            background: #FFFFFF;
            border-radius: 2px;
            padding: 20px;
        }

        .form-control {
            background: rgba(200, 200, 200, .15);
            border-radius: 3px;
            border: none;
            font-size: 16px;
            height: calc(1.5em + .75rem + 8px);
        }

        .btn {
            font-size: 16px;
            border: none;
            height: 44px;
        }

        .user-info div {
            margin-bottom: 1rem;
        }

        .form-control-feedback {
            top: 5px;
            right: 10px;
            font-size: 22px;
        }
        /*弱提示*/
        .modal-hint{ position: fixed; top: 48%; left: 50%; background: rgba(0, 0, 0, 0.7); color: #fff; border-radius: 5px; font-size: 24px; z-index:2000; padding: 12px 20px; }
        /*强提示*/
        .modal-hint.strong{ top: 0; left: 0; border-radius: 0; font-size: 24px; z-index:2001; padding: 0; padding-top: 20%; width: 100%; height: 100%; text-align: center; }
        /*旋转动画*/
        .rotate{ animation: rotate 2s linear infinite;}
        @keyframes rotate{ 0%{ transform:rotate(0deg);} 50%{ transform:rotate(180deg);} 100%{ transform:rotate(360deg);} }
    </style>
</head>
<body>
<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="customize/images/logo-back.png" height="30" class="d-inline-block align-top" alt="" loading="lazy">
        米塔企业微云
    </a>
</nav>
<h2 class="text-center my-5">重置密码</h2>
<div class="m-3">
    <div class="custom-section mx-auto" style="width: 1180px;">
        <form class="mx-auto my-5" style="width: 420px;" id="changePassForm">
            <div class="form-group">
                <input class="form-control" type="text" name="username" id="username" placeholder="手机号"  maxlength="11">
            </div>
            <div class="d-flex">
                <div class="flex-1">
                    <div class="form-group">
                        <input class="form-control" type="text" name="captcha" id="captcha" autocomplete="off" placeholder="短信验证码">
                    </div>
                </div>
                <a class="btn btn-info ml-2" style="color:#FFFFFF;line-height:32px;"
                   onclick="sendMsg(this,$('#username').val(),interval)">发送验证码</a>
            </div>
            <div class="form-group">
                <input class="form-control" type="password" name="password" id="password" placeholder="新密码">
            </div>
            <div class="form-group">
                <input class="form-control" type="password" name="password2" id="password2" placeholder="确认密码">
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block" onclick="$('#changePassForm').submit();">确认重置</button>
            </div>
            <div class="text-right font-p16">
                <a href="index.html">返回登录&gt;&gt;</a>
            </div>
        </form>
    </div>
    <div class="text-center mt-3 text-secondary font-p14">© 江苏米塔网络科技有限公司</div>
</div>
<script src="plugins/jquery-3.4.1.min.js"></script>
<script src="plugins/bootstrap/bootstrap.bundle.min.js"></script>
<script src="plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="plugins/bootstrapValidator/zh_CN.js"></script>
<script src="plugins/alert.js"></script>
<script src="customize/js/customModalV2.js"></script>
<script src="customize/js/common.js"></script>
<script src="customize/js/CommonUtils.js"></script>
<script>
    var interval;

    $(function () {
        formValidate();
    });

    function formValidate() {
        $('#changePassForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'iconfont icon-duihao',
                invalid: 'iconfont icon-chahao',
                validating: 'iconfont icon-shuaxin'
            },
            fields: {
                username: {
                    validators: {
                        trigger: 'change',
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        stringLength: {
                            min: 1,
                            max: 11
                        },
                        remote: {
                            url: host + '/sys/exist',
                            type: 'GET',
                            message: '手机号不存在',
                            data: {
                                username: $('#username').val(),
                                type: false
                            },
                            delay: 1000
                        }
                    }
                },
                captcha: {
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }, regexp: {
                            regexp: /^[a-zA-Z0-9_-]+$/,
                            message: '密码只能由字母、数字、横线和下划线组成'
                        },
                        identical: {
                            field: 'password2',
                            message: '两次输入的密码需保持一致'
                        }
                    }
                },
                password2: {
                    validators: {
                        notEmpty: {
                            message: '请再输入一次密码'
                        }, regexp: {
                            regexp: /^[a-zA-Z0-9_-]+$/,
                            message: '密码只能由字母、数字、横线和下划线组成'
                        },
                        identical: {
                            field: 'password',
                            message: '两次输入的密码需保持一致'
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) {
            //防止表单提交
            e.preventDefault();
            //获取表单实例
            var $form = $(e.target);
            //获取BootstrapValidator实例
            jQuery.support.cors = true;
            var bv = $form.data('bootstrapValidator');
            getJson('/sys/forgetPassword', $('#changePassForm').serialize(), 'POST', function (data) {
                if (data['code'] == 200) {
                    myAlert('提示', '密码重置成功', function () {
                        top.location.href = 'index.html';
                    });
                } else {
                    myAlert('提示', data['message']);
                }
            });
        });
    }
</script>
</body>
</html>
